﻿<html>
<head>
    <meta http-equiv="Content-Type" charset=utf-8" />
    <title>Interpreter</title>
    <style>
        .div-a{ float:left;width:49%;border:1px solid #F00}
        .div-b{ float:left;width:49%;border:1px solid #000}
        .div-c{ float:left;width:49%} /*没有边框*/
    </style>
    <script>
        function onBtnParse()
        {
            document.getElementById("textState").value = "45";
        }
    </script>
</head>
<body>
<!--<div class="div-a">第一个DIV盒子</div>-->
<!--<div class="div-b">第二个DIV盒子</div>-->
<!--<form name="form_a" method="GET" action="udp.php">-->
<form>
    <div class="div-c">
        Content:<br/>
        <textarea rows="30" cols="80" name="textContent" style="resize:none"></textarea><br/>
    </div>
    <div class="div-c">
        Expression:<br/>
        <textarea rows="30" cols="80" name="textExpression" style="resize:none"></textarea><br/>
    </div>
    State:<br/>
    <textarea readonly="readonly" id="textState" rows="2" cols="30" name="state" style="resize:none"></textarea><br/>
    <button onclick="onBtnParse()">Parse</button>
<!--    <a href="http://www.w3school.com.cn">W3School</a>-->
<!--    <input name="parse" type="submit" value="Parse">-->
</form>
<script language="javascript">
    $(document).ready(function (){
        $("#right_area li a").click(function (){
            $("#textPattern").val($(this).attr("title"));
            onMatch();
        });
    });

    function onParse() {
//        if (!isValidFields())
//            return false;
        document.getElementById("textState").value = "2";
//        return false;
    }

    function setVisible(idElement, visible) {
        var obj = document.getElementById(idElement);
        obj.style.visibility = visible ? "visible" : "hidden";
    }
    function isValidFields() {
        var textSour = document.getElementById("textSour");
        if (null==textSour.value || textSour.value.length<1) {
            textSour.focus();
            alert("请输入待匹配文本");
            return false;
        }
        var textPattern = document.getElementById("textPattern");
        if (null==textPattern.value || textPattern.value.length<1) {
            textPattern.focus();
            alert("请输入正则表达式");
            return false;
        }
        return true;
    }
    function buildRegex() {
        var op = "";
        if (document.getElementById("optionGlobal").checked)op = "g";
        if (document.getElementById("optionIgnoreCase").checked)op = op + "i";
        return new RegExp(document.getElementById("textPattern").value, op);
    }
    function onMatch() {
        if (!isValidFields())
            return false;
        document.getElementById("textMatchResult").value = "";
        var regex = buildRegex();
        var result = document.getElementById("textSour").value.match(regex);
        if (null==result || 0==result.length) {
            document.getElementById("textMatchResult").value = "（没有匹配）";
            return false;
        }
        if (document.getElementById("optionGlobal").checked) {
            var strResult = "共找到 " + result.length + " 处匹配：\r\n";
            for (var i=0;i < result.length;++i)strResult = strResult + result[i] + "\r\n";
            document.getElementById("textMatchResult").value = strResult;
        }
        else {
            document.getElementById("textMatchResult").value= "匹配位置：" + regex.lastIndex + "\r\n匹配结果：" + result[0];
        }
        return true;
    }
    function onReplace() {
        var str = document.getElementById("textSour").value;
        var regex = buildRegex();
        document.getElementById("textReplaceResult").value= str.replace(regex, document.getElementById("textReplace").value);
    }
    function reset()
    {
        $("#textSour").val("");
        $("#textPattern").val("");
        $("#textMatchResult").val("");
        $("#textReplace").val("");
        $("#textReplaceResult").val("");
    }
</script>
</body>
</html>
